<template>
	<div class="app-container2"
	>
		<el-form
			ref="form"
			:model="form"
			label-width="80px"
			inline
			size="medium"
		>
			<el-form-item label="党组织:">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="年份:">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
		</el-form>
		<div class="tableListOperator">
			<div class="leftBtns">
				<el-button
					@click=";(title = '会议新增'), (dialogVisible = true)"
					type="primary"
					size="mini"
					icon="el-icon-plus"
					>新建会议</el-button
				>
				<!-- <el-button size="mini" icon="el-icon-setting" plain
          >会议类型管理</el-button
        >
        <el-button size="mini" icon="el-icon-s-fold" plain>会议列表</el-button> -->
			</div>
			<div class="rightBtns">
				<el-button size="mini" plain>重置</el-button>
				<el-button type="primary" size="mini">查询</el-button>
			</div>
		</div>
		<div  style="display: flex">
			<div  style="width: 30%">
				<div
					class="pie_tit"
					style="
						margin-bottom: 20px;
						font-size: 16px;
						color: rgba(0, 0, 0, 0.85);
					"
				>
					开展情况
					<span
						style="
							padding-left: 20px;
							font-size: 14px;
							color: rgba(0, 0, 0, 0.65);
						"
						>0/1</span
					>
					<span
						style="
							padding-left: 10px;
							font-size: 14px;
							color: #999999;
						"
						>（会议完成数 / 会议开展数）</span
					>
				</div>
				<gauge-chart></gauge-chart>
				<!-- <el-empty description="还没有发起组织生活，快去发起吧~"></el-empty> -->
			</div>
			<div  style="width: 70%">
				<category-chart :chart-data="chartData"></category-chart>
			</div>
		</div>
		<el-dialog
			:title="title"
			:visible.sync="dialogVisible"
			width="1200px"
			@close="cancelForm"
		>
			<el-form
				:model="form"
				:rules="rules"
				ref="form"
				label-width="120px"
				class="form"
			>
				<el-form-item label="会议名称:" prop="title">
					<el-input
						v-model="form.title"
						placeholder="请填写会议名称"
					></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item label="开始时间:" prop="starttime">
							<el-date-picker
								v-model="form.starttime"
								type="datetime"
								placeholder="请选择开始时间"
								value-format="yyyy-MM-dd HH:mm:ss"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="会议时长:" prop="durtion">
							<el-input
								placeholder="请填写会议时长"
								v-model="form.durtion"
							>
								<template slot="append">分钟</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="发布组织:" prop="orgid">
					<treeselect
						v-model="form.orgid"
						:options="deptOptions"
						:show-count="true"
						placeholder="请选择发布组织"
					/>
				</el-form-item>
				<el-form-item label="会议类型:" prop="meetingtype">
					<el-checkbox-group
						v-model="checkTypeList"
						@change="
							(e) => handleCheckedCitiesChange(e, 'meetingtype')
						"
					>
						<el-checkbox
							:label="item.id"
							v-for="(item, index) in conferenceTypeList"
							:key="index"
							>{{ item.typename }}</el-checkbox
						>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="会议议题:" prop="meetingtopic">
					<el-checkbox-group
						v-model="checkIssueList"
						@change="
							(e) => handleCheckedCitiesChange(e, 'meetingtopic')
						"
					>
						<el-checkbox
							:label="item.id"
							v-for="(item, index) in issueList"
							:key="index"
							>{{ item.configname }}</el-checkbox
						>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="会议形式:" prop="meetingway">
					<el-radio v-model="form.meetingway" label="1"
						>线下会议</el-radio
					>
					<el-radio v-model="form.meetingway" label="2"
						>直播会议</el-radio
					>
				</el-form-item>
				<el-form-item label="具体形式:" prop="detailway">
					<el-input
						v-model="form.detailway"
						placeholder="请填写具体形式"
					></el-input>
				</el-form-item>
				<el-form-item label="签到方式:" prop="signway">
					<el-radio v-model="form.signway" :label="1"
						>位置签到</el-radio
					>
					<el-radio v-model="form.signway" :label="2"
						>扫码签到</el-radio
					>
					<el-radio v-model="form.signway" :label="3"
						>手机签到</el-radio
					>
				</el-form-item>
				<el-form-item label="会议地点:" prop="meetingaddr">
					<el-cascader
						size="large"
						clearable
						placeholder="请选择会议地点"
						@change="changeArea"
						:options="pcaTextArr"
						v-model="selectedOptions"
					>
					</el-cascader>
				</el-form-item>
				<el-form-item label="详细地址:" prop="detailaddr">
					<el-input
						v-model="form.detailaddr"
						placeholder="请填写详细地址"
					></el-input>
				</el-form-item>
				<el-form-item label="参与人员:" prop="users">
					<div
						class="ov_hid"
						style="display: flex; justify-content: space-between"
					>
						<div
							class="delete-tip"
							style="color: rgba(0, 0, 0, 0.25); font-size: 14px"
						>
							点击头像即可删除
						</div>
						<div class="join-div" style="font-size: 12px">
							参会人员：<span style="color: rgba(0, 0, 0, 0.45)"
								>1个</span
							>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="">
					<div class="person-select">
						<div class="default-addbtn">
							<div class="user-avatar">
								<span>静静</span>
							</div>

							<el-tooltip
								class="item"
								effect="dark"
								content="曾广来"
								placement="top"
							>
								<div class="name-span">曾广来</div>
							</el-tooltip>
						</div>
						<div class="default-addbtn">
							<div class="user-avatar add-icon">
								<i class="el-icon-plus"></i>
							</div>
							<div class="name-span">添加人员</div>
						</div>
					</div>
				</el-form-item>
				<el-form-item label="列席人员:" prop="attendance">
					<el-input
						v-model="form.attendance"
						placeholder="请填写列席人员"
					></el-input>
				</el-form-item>
				<el-form-item label="会议内容:" prop="content">
					<el-input
						type="textarea"
						:rows="6"
						v-model="form.content"
						placeholder="请填写会议内容"
					></el-input>
				</el-form-item>
				<el-form-item label="上传附件:" prop="fileurl">
					<el-upload
						class="upload-demo"
						action
						ref="upload"
						:auto-upload="false"
						:on-change="handleChange"
						accept=".doc,.docx,.pdf"
					>
						<el-button size="medium" plain>上传附件</el-button>
						<div
							slot="tip"
							class="el-upload__tip"
							style="color: rgba(0, 0, 0, 0.45); font-size: 14px"
						>
							支持扩展名：.doc .docx .pdf 大小200M以内
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelForm">取 消</el-button>
				<el-button type="primary" @click="submitForm('form')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { getConfigList } from '@/api/setting'
import { parentlist } from '@/api/tissue'
import {
	addMeeting,
	getUserMeetTypeList,
	uploadmeetingfile,
} from '@/api/conference'
import GaugeChart from '../../dashboard/GaugeChart.vue'
import CategoryChart from '../../dashboard/CategoryChart.vue'
import { pcaTextArr } from 'element-china-area-data'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
	components: { GaugeChart, CategoryChart, Treeselect },
	data() {
		return {
			title: '', //
			loading: false,
			pcaTextArr,
			dialogVisible: false,
			list: [],
			form: {
				id: null,
				title: '', //会议名称
				starttime: '', //开始时间
				durtion: '', //时长
				orgid: undefined, //组织id
				meetingtype: '', //会议类型
				meetingtopic: '', //会议议题
				meetingway: '', //会议形式
				detailway: '', //具体形式
				signway: '', //签到方式
				meetingaddr: '', //会议地点
				detailaddr: '', //详细地址
				users: '100', //参会人员
				attendance: '', //列席人员
				content: '', //会议内容
				fileurl: '', //附件地址
				status: '', //会议状态
			},
			rules: {
				title: [
					{
						required: true,
						message: '请填写会议名称',
						trigger: 'blur',
					},
				],
				starttime: [
					{
						required: true,
						message: '请选择开始时间',
						trigger: 'change',
					},
				],
				durtion: [
					{
						required: true,
						message: '请填写会议时长',
						trigger: 'blur',
					},
				],
				orgid: [
					{
						required: true,
						message: '请选择发布组织',
						trigger: 'change',
					},
				],
				meetingtype: [
					{
						required: true,
						message: '请选择会议类型',
						trigger: 'change',
					},
				],
				meetingtopic: [
					{
						required: true,
						message: '请选择会议议题',
						trigger: 'change',
					},
				],
				meetingway: [
					{
						required: true,
						message: '请选择会议形式',
						trigger: 'change',
					},
				],
				signway: [
					{
						required: true,
						message: '请选择签到方式',
						trigger: 'change',
					},
				],
				detailaddr: [
					{
						required: true,
						message: '请填写详细地址',
						trigger: 'blur',
					},
				],
				users: [
					{
						required: true,
						message: '请选择参与人员',
						trigger: 'change',
					},
				],
				content: [
					{
						required: true,
						message: '请填写会议内容',
						trigger: 'blur',
					},
				],
			},
			ruleForm: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
			},
			chartData: {
				expectedData: [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
				actualData: [1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0],
			},
			conferenceTypeList: [], //会议类型列表
			issueList: [], //会议议题列表
			checkTypeList: [], //
			checkIssueList: [],
			// 部门树选项
			deptOptions: undefined,
			fileList: [], //文件列表
			selectedOptions: [],
		}
	},
	methods: {
		handleChange({ raw }) {
			let data = new FormData()
			data.append('file', raw)
			uploadmeetingfile(data).then((res) => {
				this.fileList.push(res.msg)
				this.form.fileurl = this.fileList.join(',')
			})
		},
		handleCheckedCitiesChange(e, name) {
			this.form[name] = e.join(',')
		},
		cancelForm() {
			this.dialogVisible = false
			this.selectedOptions = []
			this.checkTypeList = []
			this.checkIssueList = []
			this.$refs.form.resetFields()
			this.$refs.upload.clearFiles()
		},
		//选择地区
		changeArea(e) {
			this.form.meetingaddr = e.join('/')
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					addMeeting(this.form).then((res) => {
						this.$modal.msgSuccess(res.msg)
						this.dialogVisible = false
						this.form.id = ''
					})
				} else {
					return false
				}
			})
		},
		arraySpanMethod({ row, column, rowIndex, columnIndex }) {
			console.log(row, column, rowIndex, columnIndex)
			if (rowIndex % 2 === 0) {
				if (columnIndex === 0) {
					return [12, 13]
				} else if (columnIndex === 1) {
					// return [0, 0];
				}
			}
		},
		handleSizeChange() {},
		handleCurrentChange() {},
		//获取配置信息
		getConfigList() {
			getUserMeetTypeList().then((res) => {
				this.conferenceTypeList = res.data
			})
			getConfigList({ configflag: 'huiyiyiti' }).then((res) => {
				this.issueList = res.data
			})
			parentlist().then((res) => {
				this.deptOptions = this.printAllNames(res.data)
			})
		},
		printAllNames(data) {
			data = data.map((item) => {
				return item.childlist.length
					? {
							id: item.id,
							label: item.name,
							children: this.printAllNames(item.childlist),
					  }
					: {
							id: item.id,
							label: item.name,
					  }
			})
			return data
		},
	},
	created() {
		this.getConfigList()
	},
}
</script>
<style lang="scss" scoped>
::v-deep .el-upload-list__item-name {
	color: #ff4d4f;
}
::v-deep .el-form-item {
	margin-bottom: 10px;
}
.person-select {
	display: flex;
	.default-addbtn {
		cursor: pointer;
		.user-avatar {
			width: 44px;
			height: 44px;
			line-height: 44px;
			color: #333;
			font-size: 14px;
			border-radius: 50%;
			text-align: center;
			background-color: rgba(255, 77, 79, 0.06);
			border: 1px solid #ffe3e3;
			margin-left: 10px;
			img {
				width: 100%;
				height: 100%;
				display: block;
				object-fit: cover;
			}
		}
		.add-icon {
			border: 1px solid #d1d1d1;
			background-color: #ffffff;
		}
		.name-span {
			width: 64px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.65);
			line-height: 20px;
			text-align: center;
		}
	}
}
</style>
